<template>
  <div class="box">
    <div class="contrainer">
      <div class="head">
        <img
          :src="userInfo.avatar"
          @click="uploadHeadImg"
          title="点击可修改头像"
          alt="头像加载失败"
          class="avatar"
        />
        <input
          type="file"
          accept="image/*"
          @change="handleFile"
          class="hiddenInput"
        />
        <div class="main">
          <span  style="font-size: 24px">{{userInfo.name}}</span
          ><br />
          <span>{{ userInfo.description }}</span>
        </div>
        <el-link
          icon="el-icon-edit"
          style="font-size: 18px; margin-left: 10%"
          :underline="false"
          @click="ruleForm.dialogFormVisible = true"
          >修改密码</el-link
        >

        <el-dialog
          title="修改密码"
          :visible.sync="ruleForm.dialogFormVisible"
          width="500px"
          v-if="ruleForm.dialogFormVisible"
          @close="resetForm('ruleForm')"
        >
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="旧密码" prop="oldpwd">
              <el-input
                v-model="ruleForm.oldpwd"
                type="password"
                show-password
                placeholder="请输入旧密码"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="pass">
              <el-input
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
                show-password
                placeholder="请输入新密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input
                type="password"
                v-model="ruleForm.checkPass"
                autocomplete="off"
                show-password
                placeholder="请再次输入新密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <div class="foot">
        <span>状态：在线</span>
        <span>性别：<el-radio-group v-model="userInfo.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                  </el-radio-group></span>
        <span>学历： <el-select v-model="userInfo.degree" placeholder="选择学历">
                    <el-option label="小学" value="小学"></el-option>
                    <el-option label="中学" value="初中"></el-option>
                    <el-option label="高中" value="高中"></el-option>
                    <el-option label="大学本科" value="大学本科"></el-option>
                  </el-select></span>
        <span>单位；莫寒单位</span>
        <span>部门：莫寒部门</span>
        <span style="margin-bottom: 30px"
          >注册时间：{{ userInfo.gmtCreate }}</span
        >
        <el-button type="primary" style="width:100px" @click="keepUser">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getManagerById, getTokenManager,updateManager,updatePasswordById } from "@/api/managers";
import { getToken } from "@/utils/auth";
export default {
  data() {
    var checkOldpwd = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("旧密码不能为空"));
      }
      callback();
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else if (value.length < 6 || value.length > 18) {
        callback(new Error("密码位数应为6-18位"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value.length < 6 || value.length > 18) {
        callback(new Error("密码位数应为6-18位"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入新密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      userInfo: {},
      ruleForm: {
        dialogFormVisible: false,
        oldpwd: "",
        pass: "",
        checkPass: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        oldpwd: [{ validator: checkOldpwd, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      // this.ruleForm.dialogFormVisible = false;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let pwd = {};
          pwd.oldPassword = this.ruleForm.oldpwd;
          pwd.newPassword = this.ruleForm.pass;
          updatePasswordById(this.userInfo.id,pwd).then(res=>{
            
          })
        } else {
          return false;
        }
      });
    },
    uploadHeadImg: function () {
      this.$el.querySelector(".hiddenInput").click();
    },
    // 将头像显示
    handleFile: function (e) {
      let $target = e.target || e.srcElement;
      let file = $target.files[0];
      var reader = new FileReader();
      reader.onload = (data) => {
        let res = data.target || data.srcElement;
        this.userInfo.avatar = res.result;
      };
      reader.readAsDataURL(file);
      console.log(file);
      this.$axios
        .post(
          `http://47.98.246.42:8080/Oss/userAvatar/${localStorage.getItem(
            "uid"
          )}`,
          file
        )
        .then((res) => {
          this.userInfo.avatar = res.data.url;
        });
    },
    resetForm(formName) {
      this.$refs["formName"].resetFields();
    },
    keepUser(){
      this.$delete(this.userInfo,'gmtCreate');
      this.$delete(this.userInfo,'gmtModified');
      updateManager(this.userInfo).then(res=>{
        this.$message.success('修改成功')
      })
    }
  },
  created() {
    getTokenManager(getToken()).then((res) => {
      this.userInfo = res.data.userInfo;
    });
  },
};
</script>

<style scoped>
.contrainer {
}
.avatar {
  width: 100px;
  height: 100px;
  margin-left: 5%;
  /* border: 1px solid red; */
}
.head {
  display: flex;
  flex-direction: row;
  justify-content: start;
  width: 60%;
  margin-top: 30px;
}
.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 15px;
}
.foot {
  display: flex;
  flex-direction: column;
  justify-content: start;
  flex-wrap: wrap;
  margin-left: 3%;
}
.foot span {
  margin-top: 30px;
}
.hiddenInput {
  display: none;
}
</style>